import { Button, Table, TableColumnsType } from "antd";
import { Episode } from "../../../Types/SoapOpera";
import { TableComponentProps } from "../../../Types/TableComponent";
export default function TableComponent(props: TableComponentProps<Episode>) {
  const columns: TableColumnsType<Episode> = [
    {
      title: "剧集标题",
      dataIndex: "title",
      key: "title",
    },
    {
      title: "剧集集数",
      dataIndex: "episode",
      key: "episode",
    },
    {
      title: "剧集链接",
      dataIndex: "url",
      key: "url",
    },
    {
      title: "操作",
      key: "action",
      render: (text: string, record: Episode) => {
        <>
          <Button type="primary">编辑</Button>
          <Button type="primary">删除</Button>
        </>;
      },
    },
  ];
  return (
    <Table<Episode>
      columns={columns}
      size="small"
      dataSource={props.dataSource}
      rowKey={(record) => record.id}
      pagination={{
        pageSize: props.pageSize,
        showSizeChanger: true,
        pageSizeOptions: ["10", "20", "30", "40"],
        showTotal: () => `共${props.total}条`,
        total: props.total,
        onChange: (page, pageSize) => {
          if (props.onChangePage) {
            props.onChangePage(page, pageSize);
          }
        },
      }}
    ></Table>
  );
}
